<header class="ui-header">
    <div class="header-btn" i-dom="topbtn" i-tap="topbtnClick">编辑</div>
</header>

<div class="productArea">
    {{each skus}}
    <div class="cart-product" i-dom="product-{{$index}}">

        <div class="deleteArea" i-tap="deleteSKU({{$index}})"></div>

        <div class="tumb-slider">
            <div class="checkboxArea ui-v-a" i-tap="checkboxClick({{$index}})">
                <div class="checkbox" data-check="true"></div>
            </div>
            <img src="{{$value.pic}}?imageView2/1/w/200/h/200">

            <div class="tumb-top ui-c-f">
                <div class="thum-price">
                    <div class="ui-price price-red">{{$value.price/10}}</div>
                    {{if $value.price_cost}}
                    <div class="ui-price price-gray">{{$value.price_cost/10}}</div>
                    {{/if}}
                </div>
                <h1>
                    {{$value.title}}
                </h1>

                <div class="stock">
                    库存:{{$value.stock}}件
                </div>

            </div>
            <div class="ui-counter ui-c-f">
                <div class="ui-decs ui-v-a" i-tap="descCount({{$index}})"></div>
                <input type="tel" maxlength="2" class="ui-count-input" i-keyup="setCount({{$index}})"
                       i-dom="count-{{$index}}"
                       value="{{$value.quantity}}">

                <div class="ui-add ui-v-a" i-tap="addCount({{$index}})"></div>
            </div>
        </div>
    </div>
    {{/each}}
</div>
<div class="ui-page-holder"></div>

<footer class="ui-c-f">
    <div class="select-all ui-v-a" i-tap="selectAll" i-dom="selectAll">
        <div class="checkbox" data-check="true"></div>
        <span>全选</span>
    </div>
    <button class="ui-btn-yellow ui-v-a un" i-dom="fbutton" i-tap="clickfb"><span>立即下单</span></button>
    <div class="amountArea ui-v-a">
        <div>
            <div>合计
                <div class="ui-price price ui-v-a"><span i-dom="amount">{{amount/10}}</span></div>
            </div>
            <div class="free-remain" i-dom="freeRemain">
                还差<b>10元</b>包邮
            </div>
        </div>
    </div>
</footer>

<style>
    .header-btn {
        float: right;
        height: 20px;
        line-height: 20px;
        padding: 8px;
        color: white;
        font-size: 14px;
    }

    .productArea {
        margin-top: 36px;
    }

    .cart-product {
        overflow: hidden;
        border-bottom: solid 1px #dddddd;
    }

    .cart-product:first-child {
        border-top: solid 1px #dddddd;
    }

    .deleteArea {
        width: 60px;
        height: 116px;
        text-align: center;
        position: relative;
        float: right;
        right: -60px;
        background: url("img/iconfont-trash.png") red no-repeat center;
        background-size: 32px;
        transition: right 0.3s;
        -webkit-transition: right 0.3s;
    }

    .checkboxArea {
        width: 40px;
        height: 100%;
        float: left;
        padding-left: 8px;
        text-align: center;
    }

    .checkbox {
        width: 16px;
        height: 16px;
        background: url("img/spit_Checkbox.png") no-repeat;
        background-size: 16px;
        display: inline-block;
        vertical-align: middle;
    }

    .checkbox[data-check="false"] {
        background-position: 0 0;
    }

    .checkbox[data-check="true"] {
        background-position: 0 -16px;
    }

    h1 {
        font-size: 13px;
        font-weight: lighter;
        margin-right: 60px;
        margin-top: 8px;
    }

    .tumb-slider {
        width: 100%;
        height: 100px;
        position: relative;
        left: 0;
        padding-bottom: 8px;
        transition: left 0.3s;
        -webkit-transition: left 0.3s;
    }

    .tumb-slider > img {
        margin-left: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        left: 60px;
        float: right;
        margin-right: 8px;
        text-align: right;
    }

    .thum-price > * {
        display: block !important;
    }

    .ui-counter {
        position: absolute;
        right: 8px;
    }

    .stock {
        margin-top: 8px;
        font-size: 10px;
        color: #888888;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
        display: inline-block;
    }

    .price-gray {
        display: inline-block;
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    footer .ui-btn-yellow {
        float: right;
        padding: 0;
        height: 34px;
        margin: 5px;
    }

    .select-all {
        color: white;
        float: left;
        height: 44px;
        padding-left: 8px;
        font-size: 14px;
    }

    .amountArea {
        color: white;
        text-align: right;
        font-size: 12px;
        float: right;
        height: 100%;
    }

    .amountArea > div {
        display: inline-block;
        vertical-align: middle;
    }

    footer .ui-price {
        color: #f9e043;
        display: inline-block;
    }

    .free-remain {
        font-size: 10px;
        color: #888888;
        font-weight: normal;
    }

    .free-remain b {
        color: #f9e043;
        padding: 0 3px;
        font-weight: normal;
    }

    footer .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }

    footer .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }
</style>